<template>
<div class="Verification">
  <el-form :model="model" inline @submit.native.prevent>
    <el-form-item prop="id">
      <el-input v-model="model.id" placeholder="核销码" @keyup.enter.native="details">
        <el-button slot="append" type="primary" @click="details" :disabled="!verifiable">详细信息</el-button>
      </el-input>
    </el-form-item>
  </el-form>
  <el-drawer
    :visible.sync="showForm"
    title="核销详情"
    :size="1000"
    destroy-on-close>
    <verify-detail
      v-if="verifiable"
      :code="model.id"
      @success="doSuccess"></verify-detail>
  </el-drawer>
</div>
</template>

<script>
import VerifyDetail from "@/components/Verification/VerifyDetail";
export default {
  name: "Verification",
  components: {VerifyDetail},
  computed:{
    verifiable(){
      return this.model.id.length === 6 && !isNaN(Number(this.model.id))
    }
  },
  data(){
    return{
      model:{
        id: ''
      },
      showForm: false
    }
  },
  methods:{
    details(){
      if(this.verifiable){
        this.showForm = true;
      }
    },
    doSuccess(){
      this.$message({
        type: 'success',
        message: '核销成功'
      });
      this.showForm = false;
      this.model.id = '';
    }
  }
}
</script>

<style scoped lang="less">
.Verification{
  display: flex;
  >.el-form{
    min-width: 300px;
    margin: 100px auto;
    /deep/ .el-input-group__append{
      button{
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }
    >.el-button{
      position: absolute;
    }
  }
}
</style>